<template>
  <div>
    <top></top>
    <mall-header @onSearch="onSearch"></mall-header>
    <div style="width: 1200px;margin: auto;">
      <Banner @open="bannerOpen" :carousel-list="carouselList" v-if="carouselList.length > 0">
        <div class="tip" slot="tip" v-if="(bannerNt || bannerNm) && isShowNameNote !== 'N'">
          <div class="title">{{ bannerNm }}</div>
          <div class="cont">{{ bannerNt }}</div>
        </div>
      </Banner>
    </div>
    <div class="goodsContent">
      <div class="category-header">
        <svg-icon style="margin-right: 18px;" icon-class="type" size="18"></svg-icon>
        专区
        <a-menu class="menubox" mode="inline" v-model="selectedKeys" :openKeys="defaultOpenKeys">
          <template v-for="item in zonesTree">
            <a-menu-item v-if="item.childList.length == 0" :key="item.id" @click="checkMenu(item)"> {{ item.name }} </a-menu-item>
            <template v-else>
              <a-sub-menu :key="item.id" @titleClick="titleClick">
                <div slot="title" :style="{color: selectedSubKeys == item.id ? '#1890ff' : ''}" @click.stop="checkMenu(item,'sub');">{{ item.name }}</div>
                <a-menu-item :key="i.id" v-for="i in item.childList" @click="checkMenu(i,'child')"> {{ i.name }}</a-menu-item>
              </a-sub-menu>
            </template>
          </template>
        </a-menu>
      </div>
      <div style="width: 900px;min-height: 900px;">
        <div style="display: flex;align-items: baseline;">
            <div class="filter-wrapper" :class="isAll && 'filhid'">
            <filter-item :default-params="supplierParams" display-key="fullName" value-key="id" :data="treeData" title="商品分类" @ok="handleFilter($event,'supplierParams')"></filter-item>
            <filter-item :default-params="deliveryParams" :data="dataDictLists['DELIVERY_FORM']" title="交付形态" @ok="handleFilter($event,'deliveryParams')"></filter-item>
            <filter-item :default-params="industryParams" :data="displayApplicationIndustry" title="应用行业" @ok="handleFilter($event,'industryParams')"></filter-item>
            <filter-item :default-params="sceneParams" :data="dataDictLists['APPLICATION_SCENARIO']" title="应用场景"  @ok="handleFilter($event,'sceneParams')"></filter-item>
          </div>
          <div class="moreAll" @click="isAll = !isAll" :class="{'up':!isAll,'down':isAll}">{{isAll ? '更多' : '收起'}}<a-icon type="down"/></div>
        </div>
        <div class="sort-wrapper">
          <div class="sort-left"> 排序方式：</div>
          <div class="sort-right" v-for="item in sortList" @click="changeSort(item.value)" :key="item.value" :class="{'active':params.sortType === item.value}"> {{ item.name }} </div>
        </div>
        <div class="goods-wrapper">
          <a-empty v-if="goodsList.length===0&&urlList.length===0" style="width: 100%;margin: 20px 0;"></a-empty>
          <template v-else>
            <template v-if="urlList.length >0">
            <div :span="12" v-for="(item,index) in urlList" :key="index" class="goods-item">
            <img @click="urlClick(item)" class="urlImg" :src="item.imgUrl" alt="">
            <div class="urlDescri" @click="urlClick(item)">
              <div class="url-name">{{item.name}}</div>
              <!-- <div class="url-desc">{{item.description}}描述</div> -->
            </div>
          </div>
        </template>
          <template v-else>
            <div class="goods-item" v-for="item in goodsList" :key="item.goodsId">
              <div>
                <div class="goods-item-content">
                  <img :src="item.thumbnail" alt=""/>
                  <div class="goods-item-content-right">
                    <div class="issjrz" v-if="item.authOrganFullName == '深圳数据交易所' && item.isShowFlag">
                      <a-tooltip :title="'经' + item.authOrganFullName + '合规评估'">
                        <img src="../../assets/z.png"/>
                      </a-tooltip>
                    </div>
                    <div class="goods-item-name" :style="{color: item.isPublic || '#aaa'}" @click="toDetail(item.goodsId,item.authOrganFullName)"> {{ item.goodsName }} </div>
                    <div style="display: flex;margin: 6px 0">
                      <a-tag color="orange" v-if="item.chargeType === 2 "> 免费 </a-tag>
                      <a-tag color="orange" v-else-if="item.freeNums > 0 && item.freeDimension == 1"> 免费{{item.freeNums}}天 </a-tag>
                      <a-tag color="orange" v-else-if="item.freeNums > 0 && item.freeDimension == 2"> 免费{{item.freeNums}}次 </a-tag>
                      <a-tag color="blue" v-if="item.purchasePermission === 2"> 企业 </a-tag>
                    </div>
                    <div class="goods-item-supplier" v-if="item.supplierName">
                      {{ item.supplierName }}
                    </div>
                    <div class="goods-item-content-bottom">
                      <div class="itemprice" :class="{itemflex: item.chargeType == 3}" v-if="item.activityDesc">
                        <span style="line-height: 20px;">{{ item.activityDesc  }}</span>
                        <!-- <span class="unit">{{ item.chargeType === 1 ? item.unit : '' }}</span> -->
                        <div class="through">
                          {{ item.chargeType == 3 ? '面议' : ('¥' + (item.chargeType == 1 ? item.price : 0)) }}
                          {{ (item.chargeType === 1 ? item.unit : '') }}
                        </div>
                      </div>
                      <div class="goods-item-price" v-else>
                        <div style="line-height: 20px;"> {{item.chargeType == 3 ? '面议' : ('¥' + (item.chargeType == 1 ? item.price : 0))}}</div>
                        <span class="goods-item-unit">{{ item.chargeType === 1 ? item.unit : '' }}</span>
                      </div>
                      <!-- <div class="goods-item-price">
                        <div style="line-height: 20px;" v-if="item.chargeType!==3">
                          ¥{{ item.chargeType === 1 ? item.price : 0 }}
                        </div>
                        <div style="line-height: 20px;" v-else>
                          面议sss
                        </div>
                        <span class="goods-item-unit">{{ item.chargeType === 1 ? item.unit : '' }}</span>
                      </div> -->
                      <rate-star :rate="item.goodsRate" show-bg></rate-star>
                    </div>
                  </div>
                </div>
                <div class="goods-item-desc more-t"> {{ item.goodsDesc }} </div>
              </div>
              <div class="goods-item-bottom">
                <div class="goods-item-type">
                  <svg-icon icon-class="data_type" size="14" style="margin-right: 3px;"></svg-icon>
                  应用行业：
                  <span class="goods-item-type-content">{{ item.applicationIndustry }}</span>
                </div>
                <div class="goods-item-type">
                  <svg-icon icon-class="data_scene" size="14" style="margin-right: 3px;"></svg-icon>
                  应用场景：
                  <span class="goods-item-type-content">{{ item.applicationScenario }}</span>
                </div>
              </div>
            </div>
          </template>
          </template>
          
        </div>
        <div class="pagination" v-if="goodsList.length > 0&&urlList.length == 0">
          <paging :total="paging.total" :current="paging.page" :show-size-changer="false" :defaultPageSize="paging.limit" @pageChange="handlePageChange" ref="paging" />
        </div>
      </div>
    </div>
    <mall-footer></mall-footer>
  </div>
</template>

<script>
import Top from '@/components/base/Top'
import MallHeader from '@/components/base/MallHeader'
import Type from '@/components/Type'
import Paging from '@/components/base/Paging'
import MallFooter from '@/components/base/MallFooter'
import Banner from '../portal/components/Banner'
import {dictService} from '@/api/common'
import {pageMixin} from '@/mixins'
import {searchGoodsPage} from '@/api/goods'
import ChooseType from '@/components/ChooseType'
import RateStar from '@/components/RateStar'
import FilterItem from './components/FilterItem'
import {queryGoodsType} from '@/api/goods/type'
import { getSpecialAreaTreeList } from '@/api/portal'
function noToJump() {
  console.log('------d')
}
export default {
  name: 'zoneDetail',
  mixins: [pageMixin],
  components: {
    FilterItem,
    RateStar,
    ChooseType,
    Top,
    MallHeader,
    Banner,
    Type,
    Paging,
    MallFooter
  },
  data () {
    return {
      isAll: true,
      bannerNm: '',
      bannerNt: '',
      isShowNameNote: 'Y',
      treeData: [],
      zonesTree: [],
      id: '',
      selectedKeys: [],
      selectedSubKeys: '',
      defaultOpenKeys: [],
      dataDictMap: {
        DELIVERY_FORM: {},
        GOODS_CHARGE_TYPE: {}
      },
      carouselList:[],
      dataDictLists: [],
      params: {
        'applicationIndustry': '',
        'applicationScenario': '',
        'deliveryForm': '',
        'goodsIdList': [],
        'goodsName': '',
        'goodsTypeId': '',
        'goodsTypeIdList': [],
        'isHot': false,
        'order': '',
        'orderBy': '',
        'payModel': '',
        'sortType': 10,
        'status': '',
        'supplierId': '',
        'supplierIdList': [],
        'supplierName': '',
      },
      defaultTypeId: '',
      sortList: [
        {name: '综合排序', value: 0},
        {name: '最新发布', value: 10},
        {name: '最优评价', value: 20},
        {name: '最多使用', value: 30},
      ],
      goodsList: [],
      supplierParams: [],
      sceneParams: [],
      industryParams: [],
      deliveryParams: [],
      urlList: [],
      interval: undefined,
      modal:undefined,
      secondsToGo: 2,
      isFlag: false, //是否点击取消跳转
    }
  },
  computed: {
    displayApplicationIndustry () {
      return this.dataDictLists['APPLICATION_INDUSTRY'] ? this.dataDictLists['APPLICATION_INDUSTRY'].sort((a, b) => a.name.length - b.name.length) : []
    }
  },
  created () {
    dictService(this, ['DELIVERY_FORM', 'APPLICATION_INDUSTRY', 'APPLICATION_SCENARIO'])
    this.defaultTypeId = this.$route.query.type || ''
    this.params.goodsTypeId = this.$route.query.type || ''
    this.params.goodsName = this.$route.query.title || ''
    const deliveryForm = this.$route.query.deliveryForm || ''
    if (deliveryForm) {
      this.deliveryParams.push(deliveryForm)
    }
    const supplierId = this.$route.query.supplier || ''
    if (supplierId) {
      this.supplierParams.push(supplierId)
    }
    this.params.isHot = this.$route.query.hot
    this.paging.limit = 10
    this.id = this.$route.query.id
    this.selectedKeys = [this.id]
    this.loadData()
    this.loadTypeList()
    this.loadZones()
  },
  methods: {
    urlClick(item) {
      console.log(item)
     this.secondsToGo = 2;
      let that = this
      const h = this.$createElement;

      this.modal = this.$success({
        title: '温馨提醒，您即将离开深圳数据交易所数据交易平台，进入第三方网站，请注意保护您的信息安全',
        okText: "继续前往",
        onOk () {
if (item.openType && item.openUrl) {
        if (item.openType === '1') {
          location.href = item.openUrl
        } else {
          window.open(item.openUrl, '_blank')
        }
      }
        },
              content: h('div', {
                  style: {
                    height: '35px'
                  }
                }, [
                  // h('p',{
                  //   style: {
                  //     fontSize:'18px',
                  //     marginTop: '10px',
                  //     marginBottom: '10px'
                  //   },
                  // }, item.openUrl),
                  h('span',{
                    style: {
                      color: 'red'
                    },
                  }, that.secondsToGo),
                  h('span',{
                    style: {
                      color: 'gray'
                    },
                  }, '秒后自动前往该网站'),
                  h('span',{
                    style: {
                      color: '#1890ff',
                      marginLeft:'10px',
                      cursor: 'pointer'
                      
                    },
                    on: {
        click: that.noToJump
      }
                  }, '取消跳转'),
                ]),
      });
      this.interval = setInterval(() => {
        this.secondsToGo -= 1;
        this.modal.update({
          content: h('div', {
                  style: {
                    height: '35px'
                  }
                }, [
                // h('p',{
                //     style: {
                //       fontSize:'18px',
                //       marginTop: '10px',
                //       marginBottom: '10px'
                //     },
                //   }, item.openUrl),
                  h('span',{
                    style: {
                      color: 'red'
                    },
                  }, that.secondsToGo),
                  h('span',{
                    style: {
                      color: 'gray'
                    },
                  }, '秒后自动前往该网站'),
                  h('span',{
                    style: {
                      color: '#1890ff',
                      marginLeft:'10px',
                      cursor: 'pointer'
                    },
                    on: {
        click: that.noToJump
      }
                  }, '取消跳转'),
                ]),
                onOk () {
if (item.openType && item.openUrl) {
        if (item.openType === '1') {
          location.href = item.openUrl
        } else {
          window.open(item.openUrl, '_blank')
        }
      }
        },
        });
      }, 1000);
      console.log(this.interval)
      setTimeout(() => {
        
        clearInterval(this.interval);
        this.modal.destroy();
        if(this.isFlag) {
          this.isFlag = false
          return false
        }
        if (item.openType && item.openUrl) {
        if (item.openType === '1') {
          location.href = item.openUrl
        } else {
          window.open(item.openUrl, '_blank')
        }
      }
      }, this.secondsToGo * 1000);
      // if (item.openType && item.openUrl) {
      //   if (item.openType === '1') {
      //     location.href = item.openUrl
      //   } else {
      //     window.open(item.openUrl, '_blank')
      //   }
      // }
    },
    noToJump() {
      console.log('-----')
      this.secondsToGo=0
      this.isFlag = true
      clearInterval(this.interval);
        this.modal.destroy();
    },
    loadData () {
      const params = {
        ...this.params,
        goodsTypeIdList: this.supplierParams,
        applicationScenario: this.sceneParams.join(','),
        applicationIndustry: this.industryParams.join(','),
        deliveryForm: this.deliveryParams.join(','),
        page: this.paging.page,
        limit: this.paging.limit,
        specialAreaIds: this.id
      }
      searchGoodsPage(params).then(res => {
        if (res.code === 0) {
          this.goodsList = res.data.records
          this.paging.total = Number(res.data.total) || 0
        }
      })
    },
    async loadZones(){
      const params = {
        id: this.id,
        startTime: new Date().getTime(),
        endTime: new Date().getTime(),
        status: '1',
        sortMode: 0
      }
      let res = await getSpecialAreaTreeList(params)
      this.zonesTree = res.data || []
      let item = this.zonesTree.find(v=>v.id == this.id)
      console.log(item)
      // this.urlList = item.specialAreaDTOs || []
      let key = item.childList.length > 0 ? 'sub': ''
      this.checkMenu(item,key);
      if(key == 'sub')this.defaultOpenKeys = [item.id]
    },
    checkMenu({id, cycleImgs, name, note, isShowNameNote,specialAreaDTOs },key){
      this.bannerNm = name
      this.bannerNt = note
      this.isShowNameNote = isShowNameNote

      this.carouselList = cycleImgs;
      // if(key == 'child') {
        this.urlList = specialAreaDTOs || []
      // }else {
      //   this.urlList = []
      // }
      if(key == 'sub'){
        this.selectedSubKeys = id;
        this.selectedKeys = []
        // this.defaultOpenKeys = [id]
      }
      else this.selectedSubKeys = ''
      this.id = id
      this.loadData()
    },
    bannerOpen (item) {
      if (item.openType && item.openUrl) {
        if (item.openType === '1') {
          location.href = item.openUrl
        } else {
          window.open(item.openUrl, '_blank')
        }
      }
    },
    titleClick(e){
      this.defaultOpenKeys = this.defaultOpenKeys[0] == e.key ? [] : [e.key]
    },
    loadTypeList () {
      queryGoodsType().then(res => {
        if (res.code === 0) {
          this.treeData = res.data.filter(item => item.level === 2)
        }
      })
    },
    onSearch (e) {
      this.params.goodsName = e || ''
      this.loadData()
    },
    handlePageChange (page, pageSize) {
      this.paging.page = page
      this.paging.limit = pageSize
      this.loadData()
    },
    toDetail (id, authOrganFullName) {
      this.$router.push({
        path: '/goodsDetail',
        query: {
          id: id,
          authorganFulIName: authOrganFullName
        }
      })
    },
    /**
     * 商品类型
     * @param e
     */
    typeChange (e) {
      let { id, pid } = e
      let gid = pid || (id == 'allall' ? '' : id)
      this.defaultTypeId = id
      this.params.goodsTypeId = pid || gid
      this.supplierParams = []
      this.sceneParams = []
      this.industryParams = []
      this.deliveryParams = []
      this.loadData()
    },
    /**
     * 排序
     * @param code
     */
    changeSort (code) {
      this.params.sortType = code
      this.loadData()
    },
    /**
     * 查询条件
     * @param e
     * @param key
     */
    handleFilter (e, key) {
      this.$data[key] = e
      // this.loadData()
    }
  }
}
</script>

<style scoped lang="scss">
$width: 1200px;
$mainColor: #0078FE;

.urlImg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.urlDescri {
  position: absolute;
  font-size: 16px;
  width:  calc((100% - 40px));
  top: 94px;
  text-align: center;
  cursor: pointer;
  .url-name {
    // margin-bottom: 20px;
    color: #fff;
    font-size: 30px;
    font-family: Source Han Sans CN,Microsoft YaHei;
    font-weight: 900;

  }
  .url-desc {
    color: #fff;
    font-size: 30px;
    font-family: Source Han Sans CN,Microsoft YaHei;
    font-weight: 900;



  }
}
.moreAll{
  width: 80px;
  cursor: pointer;
  margin: 10px auto;
  text-align: center;
  font-size: 13px;
  &.down {
    i {
      margin-left: 4px;
      rotate: 0deg;
      transition: rotate .3s;
    }
  }
  &.up {
    i {
      margin-left: 4px;
      rotate: 180deg;
      transition: rotate .3s;
    }
  }
}
.tip{
  padding: 114px 96px 0;
  color: #fff;
  text-align: left;
  .title{
    font-size: 66px;
    font-weight: 700;
  }
  .cont{
    width: 440px;
    word-wrap: break-word;
    font-size: 20px;
    letter-spacing: 2px;
  }
}

>>>.ant-menu-inline{
  border: 0;
}
.menubox{
  width: 280px;
  height: 888px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: -21px;
}
.goodsContent{
  margin: 20px auto;
  width: $width;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.category-header {
  width: 280px;
  height: 46px;
  line-height: 46px;
  padding-left: 20px;
  border-radius: 10px 10px 0 0;
  background-image: linear-gradient(to left, #58A5FF, #0078FE);
  font-size: 16px;
  color: white;
}


/deep/ .ant-tag {
  background-color: #fff !important;
}
.filhid{
  height: 50px;
  overflow: hidden;
}
.filter-wrapper {
  width: 100%;//$width;
  margin: 0 auto 20px;
  background: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 120, 254, 0.1);
  border-radius: 10px;
}

.sort-wrapper {
  width: 100%;//$width;
  margin: 0 auto;
  padding-left: 20px;
  height: 40px;
  background: #FAFAFA;
  border-radius: 6px;
  border: 1px solid #E2E2E2;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  display: flex;
  align-items: center;

  .sort-left {
    color: #646464;
    width: 100px;
  }

  .sort-right {
    color: #323232;
    margin-right: 40px;
    cursor: pointer;

    &:hover {
      color: $mainColor;
    }

    &.active {
      color: $mainColor;
    }
  }
}

.goods-wrapper {
  margin: 0 auto;
  width: 100%;//$width;
  display: flex;
  flex-wrap: wrap;
  .goods-item {
    height: 240px;
    width: 100%;//$width;
    position: relative;

    width: calc((100% - 40px) / 2);
    margin-left: 20px;
    box-shadow: 0 0 10px 0 rgba(#0078FE, 0.1);
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    justify-content: space-between;

    &:nth-child(2n+1) {
      margin-left: 0;
    }

    .goods-item-content {
      display: flex;
      // align-items: center;
      padding-bottom: 20px;
      margin-bottom: 20px;
      // height: 110px;
      border-bottom: 1px dotted #E2E2E2;

      img {
        width: 80px;
        height: 80px;
      }

      .goods-item-content-right {
        margin-left: 16px;
        width: calc(100% - 99px);
        position: relative;
        // flex: 1;
        // width: 0;
        // height: 100px;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        .issjrz{
          position: absolute;
          top: -6px;
          right: -6px;
          img{
            height: 24px;
            width: 24px;
          }
        }
        .goods-item-name {
          font-size: 14px;
          cursor: pointer;
          line-height: 14px;
          font-family: PingFangSC-Medium, PingFang SC, sans-serif;
          font-weight: 500;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #323232;
          width: 90%;
          &:hover {
            color: $mainColor;
          }
        }

        .goods-item-supplier {
          font-size: 12px;
          line-height: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          color: $mainColor;
          padding: 5px 10px;
          border-radius: 2px;
          border: 1px solid #CCE4FE;
          width: fit-content;
          // width: 100%;//$width;

          max-width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-bottom: 6px;
        }

        .goods-item-content-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .through{
            text-decoration: line-through;
            color: #999;
            font-size: 12px;
            margin-left: 4px;

          }
          .itemflex{
            white-space:nowrap;
            display: flex;
            align-items: self-end;
          }
          .itemprice{
            font-size: 20px;
            color: #E03437;
            font-weight: 500;
            .unit{
              font-size: 12px;
              font-weight: 400;
              color: #909090;
              margin-left: 6px;
            }
          }
          .goods-item-price {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC, sans-serif;
            font-weight: 500;
            color: #E03437;
            display: flex;
            align-items: flex-end;

            .goods-item-unit {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC, sans-serif;
              font-weight: 400;
              color: #909090;
              margin-left: 6px;
            }
          }
        }
      }
    }

    .goods-item-desc {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #646464;
      line-height: 15px;
    }

    .goods-item-bottom {
      display: flex;
      align-items: flex-start;

      .goods-item-type {
        flex: 1;
        width: 0;
        display: flex;
        align-items: flex-start;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        line-height: 14px;

        &:last-child {
          margin-left: 5px;
        }

        .goods-item-type-content {
          color: #323232;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.pagination {
  width: 100%;//$width;

  margin: 20px auto;
  padding-bottom: 20px;
}
</style>
